<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>日历插件</title>
    <link rel="stylesheet" href="css/tdCalendar.css?v=1.0.1">
    <script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="js/tdCalendar.js" type="text/javascript"></script>
    <script src="js/statutoryHoliday.js" type="text/javascript"></script>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="tdCalendar"></div>
</div>
</body>
<script>
    // 法定节假日信息选这个配置
    var statutoryHoliday = [{
        date: '2021-10-01',
        // 节假日名称
        holidayName: '国庆节',
        // 是否节假日当天
        isHolidayDay: true,
        // 是否补班
        isWork: false,
    }];

    $("#tdCalendar").tdCalendar({
        // 当前显示的年月
        currentYearMonth: "2021-08-12",
        // 上一页/下一页按钮是否显示
        prevAndNextMonthShow: true,
        switchMonthEvent: function (yearMonthStr) {
            console.log("当前年月：" + yearMonthStr);
        },
        // 日期列表
        dataList: [{
            // 对应的日期 2021-08-11
            date: "2021-08-12",
            // 日期描述 如：七夕，休 等
            dateTips: "今天要看书",
            activeFlag: true
            // 其他自定义属性都可以
        }, {
            // 对应的日期 2021-08-11
            date: "2021-08-14",
            // 日期描述 如：七夕，休 等
            dateTips: "<b>七夕</b>",
            activeFlag: true
            // 其他自定义属性都可以
        }, {
            // 对应的日期 2021-08-11
            date: "2021-08-15",
            // 日期描述 如：七夕，休 等
            dateTips: "朋友结婚",
            activeFlag: true
            // 其他自定义属性都可以
        }],
        activeFlag: true,
        // 日期框最小高度
        dataMinHeight: "50px",
        // 日期框最大高度
        dataMaxHeight: "500px",
        // 绘制日期格内容时的回调函数
        // dateData: 当前日期的数据
        // $dateContent: 当前日期内容区域jQuery对象
        // 返回值： 如果返回了内容 则会把返回的内容添加到$dateContent中
        drawDateContentEvent: function (dateData, dayData, $dateContent) {
            console.log(dateData);
            console.log(dayData);
            console.log($dateContent);
            var str = '<div class="remarks-info-item remarks-info-item-overtimeWork">' +
                '    <div class="remark-1">' +
                '        <span class="name">小露露</span>' +
                '        <span class="state">加班</span>' +
                '    </div>' +
                '    <div class="remark-2">' + dayData.date + '</div>' +
                '    <div class="remark-operate">' +
                '        <span class="operate-1"><img src="images/edit-icon.png" alt="编辑" title="编辑"></span>' +
                '    </div>' +
                '</div>';
            return str;
        },
        // 是否为存在dateContent才调用 为false时，全部日期渲染都会调用
        drawDateContentIfExist: true,
        // 法定节假日信息
        statutoryHoliday: TD_STATUTORY_HOLIDAY,
        // 日期框点击样式
        // dateData: 当前日期传入数据
        // dayData: 当前日期数据
        // $dateElem: 当前日期区域jQuery对象
        // e：event
        clickEvent: function (dateData, dayData, $dateElem, e) {
            console.log(dateData);
            console.log(dayData);
            console.log($dateElem);
            console.log(e);
        },
        // 头部年月显示的对齐方式 left center right
        headerYearMonthAlign: "left",
        // 日期内容区域的最大高度 不包含表示星期的行 如果设置了，超过高度就可以滚动
        dateContentMaxHeight: function () {
            return ($(window).height() - 200) + "px";
        },
        // 按键事件是否全局生效
        keyUpEventGlobal: true,
    });
</script>
</html>
